<template>
  <div class="recordDetail">
    <Navbar :appTitle="$route.meta.title"/>
    <!--头部-->
    <div class="d-head">
      <div class="content">
        <div class="left">
          <div class="title">{{ detailInfo.shelvesTaskCode }}</div>
          <div class="row">
            收货时间：
            <span style="color:#191f25">{{detailInfo.createTime || "-"}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--tab-->
    <van-tabs v-model="active" :offset-top="158" line-width="2.4rem" title-active-color="#108ee9" color="#1890FF">
      <van-tab title="物品明细" title-class="tab-wrap-ano-detail">
        <div class="list" :style="{height:detailInfo.totalShelvedNum == 0 || detailInfo.totalUnShelvedNum > 0 ? 'calc(100vh - 210px)' : 'calc(100vh - 160px)'}" v-if="entryDetails && entryDetails.length != 0">
          <div
            v-for="(item, index) in entryDetails"
            :key="index"
            class="wrap"
          >
            <div class="top">
              <div class="icon"></div>
              <div class="title">
                {{ item.goodsCode || '-' }} |
                {{ item.goodsName || '-' }} |
                {{ item.goodsSpec || '-' }}
              </div>
            </div>
            <div class="center">
              <div>
                <p>
                  <span class="key">产地：</span>
                  <span class="value">{{ item.address || '-' }}</span>
                </p>
                <p>
                  <span class="key">包装规格：</span>
                  <span class="value">{{ item.packageSpec  || '-' }}</span>
                </p>
                <p>
                  <span class="key">单位：</span>
                  <span class="value">{{ item.unitName  || '-' }}</span>
                </p>
                <p>
                  <span class="key">批号：</span>
                  <span class="value">{{ item.batchCode  || '-' }}</span>
                </p>
                <p>
                  <span class="key">生产日期：</span>
                  <span class="value">{{ item.produceDate  || '-' }}</span>
                </p>
                <p>
                  <span class="key">待上架/收货数量：</span>
                  <span class="value">{{ item.unShelvedNumText  || '-' }} / {{ item.receiptedNumText  || '-' }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <van-empty v-else description="物品明细为空" />
      </van-tab>
      <van-tab title="上架记录" title-class="tab-wrap-ano-detail">
        <div class="list" :style="{height:detailInfo.totalShelvedNum == 0 || detailInfo.totalUnShelvedNum > 0 ? 'calc(100vh - 210px)' : 'calc(100vh - 160px)'}" v-if="receiptInfoList && receiptInfoList.length != 0">
          <div
            v-for="(item, index) in receiptInfoList"
            :key="index"
            class="wrap"
            @click="handleWarrantDetail(item)"
          >
            <div class="top">
              <div class="icon"></div>
              <div class="title">
                {{ item.taskCode }}
              </div>
            </div>
            <div class="center">
              <div>
                <p>
                  <span class="key">物品明细：</span>
                  <span class="value">{{ item.goodsTypeNum || '-' }}</span>
                </p>
                <p>
                  <span class="key">物品数量：</span>
                  <span class="value">{{ item.goodsNumText || '-' }}</span>
                </p>
                <p>
                  <span class="key">创建人：</span>
                  <span class="value">{{ item.realName || '-' }}</span>
                </p>
                <p>
                  <span class="key">创建时间：</span>
                  <span class="value">{{ item.createTime || '-' }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <van-empty v-else description="上架记录为空" />
      </van-tab>
      <van-tab title="单据信息" title-class="tab-wrap-ano-detail">
        <div class="list">
          <div class="wrap">
            <div class="center">
              <div>
                <p>
                  <span class="key">业务类型：</span>
                  <span class="value">{{ detailInfo.inboundTaskTypeText || '-' }}</span>
                </p>
                <p>
                  <span class="key">入库任务编号：</span>
                  <span class="value">{{ detailInfo.inboundTaskCode || '-' }}</span>
                </p>
                <p>
                  <span class="key">收货人：</span>
                  <span class="value">{{ detailInfo.applyUserName || '-' }}</span>
                </p>
                <p>
                  <span class="key">收货时间：</span>
                  <span class="value">{{ detailInfo.createTime || '-' }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title-class="tab-wrap-ano-detail" disabled></van-tab>
    </van-tabs>
    <!--操作按钮-->
    <div class="search-bottom" v-show="detailInfo.totalShelvedNum == 0 || detailInfo.totalUnShelvedNum > 0">
      <div class="searchContain"></div>
      <div class="searchContain">
        <span class="btn del" v-if="detailInfo.totalShelvedNum == 0" @click="handleDelete">删除</span>
        <span class="btn cancel" v-if="detailInfo.totalUnShelvedNum > 0" style="width: 124px;" @click="handlePrint">打印物品标签</span>
        <span class="btn confirm" v-if="detailInfo.totalUnShelvedNum > 0" @click="handlShelves">上架</span>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import pageList from "@/components/pageList";
import {
  shelvesTaskDetailAno,
  shelvesTaskDetail,
  deleteShelvesTask,
  queryInWholeForPageList
} from "@/api/inventoryOrder";
import store from '@/store'
import { Dialog } from "vant";

export default {
  name: "shelfTaskDetail", //入库单详情
  components: { Navbar, pageList },
  data() {
    return {
      active: 0,
      detailInfo: {},
      entryDetails: [],
      receiptInfoList: [],
    };
  },
  created() {
    store.commit('SET_CURRENT_PREFIX', '/jksaas-produce/produce')
    this.getDetail();
  },
  methods: {
    // 获取详情相关数据
    async getDetail() {
      let id = this.$route.query.id;
      // 上架任务详情 基本信息
      shelvesTaskDetailAno({taskId: id}).then((res) => {
        if (res.code == 200 && res.result) {
          this.detailInfo = res.result;
        } else {
          this.$toast(res.message);
        }
      });

      // 上架任务详情 物品明细、单据信息
      shelvesTaskDetail({taskId: id}).then((res) => {
        if (res.code == 200 && res.result) {
          this.entryDetails = res.result.unShelvedGoodsList.concat(res.result.shelvedGoodsList);
        } else {
          this.$toast(res.message);
        }
      });

      queryInWholeForPageList({shelvesTaskId: id}).then((res) => {
        if (res.code == 200 && res.result) {
          this.receiptInfoList = res.result.records
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 删除
    handleDelete() {
      Dialog.confirm({
        title: '确定删除上架任务吗？',
        message: '',
        confirmButtonColor: '#2b85e4'
      })
      .then(() => {
        deleteShelvesTask({taskId: this.detailInfo.taskId}).then((res) => {
          if (res.success) {
            this.$toast('上架任务删除成功');
            this.$router.go(-1);
          } else {
            this.$toast(res.message);
          }
        });
      })
      .catch(() => {
        // on cancel
      });
    },
    //打印
    handlePrint() {
      this.$router.push({
        path: "/shelfTaskPrintList",
        query: {
          taskId: this.detailInfo.taskId
        }
      });
    },
    //上架
    handlShelves() {
      this.$router.push({
        path: "/shelfTaskForm",
        query: {
          id: this.detailInfo.taskId
        }
      });
    },
    //入库单详情
    handleWarrantDetail(item) {
      this.$router.push({
        path: "/warehouseWarrantDetail",
        query: {
          id: item.id,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
.recordDetail {
  height: 100vh;
  overflow: hidden;
  .d-head {
    width: 100%;
    padding: 32px;
    background: #ffffff;
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        flex: 1;
        .title {
          font-size: 32px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 32px;
          max-width: 8rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 28px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 20px;
        }
      }
      .right {
        flex: 1;
        .rightImg {
          display: block;
          width: 55px;
          height: 55px;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }

  .otherTaps {
    background: #ffffff;
    padding: 32px;
    margin-top: 20px;
    .title {
      padding-bottom: 20px;
      border-bottom: 1px solid #eeeeee;
      .icon {
        display: inline-block;
        width: 6px;
        height: 28px;
        background: #1890ff;
      }
      .content {
        width: 126px;
        height: 32px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #191f25;
        line-height: 44px;
        margin-left: 20px;
      }
    }
    .content {
      .row {
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 32px;
        display: flex;
        .r-label {
          color: #888888;
          display: block;
          // width: 0.7rem;
          //   border: 1px solid red;
        }
        .r-column {
          display: block;
          color: #191f25;
          width: 500px;
          //   border: 1px solid red;
          //    width: 1rem;
        }
      }
      .fhrow {
        display: flex;
        .fhImg {
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 0.1rem;
        }
        .rt-column {
          width: 2.55rem;
          //   height: 2.55rem;
          margin-left: 0.2rem;
          .rt-title {
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            margin-bottom: 0.16rem;
          }
          .rt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.23rem;
            .column {
              //    border: 1px solid red;
              width: 1.5rem;
              .column-t {
                font-size: 0.14rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 0.03rem;
              }
              .column-c {
                font-size: 0.16rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
  .search-bottom {
    width: 100%;
    height: 100px;
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0 11px;
    box-sizing: border-box;
    font-size: 32px;
    font-weight: 500;
    z-index: 9;
    .searchContain {
      .btn {
        display: inline-block;
        box-sizing: border-box;
        width: 124px;
        height: 64px;
        align-items: center;
        border-radius: 6px;
        margin-right: 18px;
        text-align: center;
        line-height: 64px;
      }
      .confirm {
        background: #1890ff;
        color: #ffffff;
      }
      .cancel {
        border: 1px solid #b2b2b2;
        background: #f6f6f6;
        color: #5a5a5a;
      }
    }
  }
}
.contentBox {
  margin-top: 1.38rem;
}

.otherMargin {
  height: 0.1rem;
  background: #f5f5f5;
}
.bottomLine {
  height: 0.01rem;
  background-color: #f0f0f0;
  margin: 0.16rem 0.16rem 0 0.06rem;
}
.ExamineBottom {
  height: 0.5rem;
}
.status {
  display: inline-block;
  margin-top: 0.16rem;
  padding: 0.03rem 0.08rem;
  background: #edf6ff;
  border-radius: 0.02rem;
  font-size: 0.11rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #3774ac;
}
.list {
  height: 67vh;
  overflow: scroll;
  .wrap {
    background: #fff;
    margin: 24px 0;
    padding: 30px;
    width: 100vw;
    .top {
      display: flex;
      justify-content: flex-start;
      .icon {
        width: 6px;
        height: 36px;
        background: #1890ff;
        margin-top: 6px;
        margin-right: 20px;
      }
      .title {
        width: 620px;
        margin-right: 20px;
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #191f25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .spot img {
        width: 40px;
        height: 40px;
      }
    }
    .center {
      p {
        margin: 16px 25px;
        font-size: 28px;
        display: flex;
        position: relative;
        .key {
          color: #888888;
        }
        .value {
          color: #191f25;
          width: 380px;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .arrow {
          color: #1890ff;
          // float: right;
          // margin-right: -0.05rem;
          // display: block;
          position: absolute;
          right: -10px
        }
        .fontAno {
          font-size: 30px;
          padding-left: 20px;
        }
      }
      .showAll {
        background: #f5f8ff;
        width: 100vw;
        margin-left: -0.15rem;
        padding: 0.15rem;
        margin-bottom: 0.15rem;
      }
    }
    .label {
      margin-left: -0.03rem;
      margin-top: -0.1rem;
      span {
        height: 0.16rem;
        background: #f0f6fe;
        color: #1890ff;
        margin-right: 0.1rem;
        padding: 0.03rem 0.08rem;
        font-size: 0.11rem;
        border-radius: 0.03rem;
      }
    }
    .foot {
      // height: 0.33rem;
      // line-height: 0.33rem;
      display: flex;
      justify-content: space-between;
      // margin: 0.15rem 0.12rem 0 0.12rem;
      font-size: 0.14rem;
      .pictures {
        width: 0.33rem;
        height: 0.33rem;
        line-height: 0.33rem;
        text-align: center;
        color: #fff;
        background: #1890ff;
        display: block;
        border-radius: 0.06rem;
        font-size: 0.12rem;
        margin-right: 0.1rem;
      }
      .text {
        width: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .opera {
        color: #1890ff;
        font-size: 0.14rem;
      }
    }
  }
}
.del {
  background: #ff5f4e;
  color: #fff;
}
</style>
